import { useState,Component } from "react";
const ThemeContext=React.createContext()
const {Provider,Consumer}=ThemeContext

class Child extends Component{

    render (){
        console.log(this);
        return(
            <Consumer>
                {
                    (ctx)=>{
                        console.log(ctx);
                        return(
                            <div style={ctx}>子组件</div>
                        )
                    }
                }
            </Consumer>
  
        )
    }
}
function ThemeToggle ({theme,onChange}){
    let change=(key,e)=>{

        onChange(key,e.target.value)
    }
    return(
        <div>
            前景色 <input type="color" name="color" value={theme.color} onChange={e=>change('color',e)}/>
            后景色 <input type="color" name="background" value={theme.background} onChange={e=>change('background',e)}/>
        </div>
    )
}
function Parent (){
    const [theme,setTheme]=useState({color:"#000000",background:"#cccccc"})
    // let change=(key,e)=>{
    //     setTheme({...theme,[key]:e.target.value})
    // }
    let changeToggle=(key,value)=>{
        setTheme({...theme,[key]:value})
    }
    return(
        <Provider value={theme}>
            <Child/>
            {/* <div>
                前景色 <input type="color" value={theme.color} onChange={e=>change('color',e)}/>
                后景色 <input type="color" value={theme.background} onChange={e=>change('background',e)}/>
            </div> */}
            <ThemeToggle theme={theme} onChange={changeToggle}></ThemeToggle>
        </Provider>
    )
}
export default Parent